<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>随便聊</title>
  <link rel="shortcut icon" href="./logo.svg" type="image/x-icon">
  <script src="https://cdn.socket.io/4.2.0/socket.io.min.js"></script>
  <style>
    .d-input {
      position: fixed;
      opacity: 0;
      z-index: 10 !important;
      left: -100px;
      top: -100px;
      border: 1px solid #000;
      width: 140px;
      height: 60px;
      resize: both;
      overflow: hidden;
      outline: none;
      background-color: white;
    }

    .d-div {
      position: absolute;
    }

    .button {
      position: absolute;
      z-index: 100;
    }

    html,
    body {
      height: 100vh;
      width: 100vw;
      margin: 0;
      cursor: none;
      box-sizing: border-box;
    }

    .parent {
      z-index: 10;
    }

    .div-box {
      border: 1px solid #000;
    }

    .div-box:hover {
      background-color: rgba(22, 216, 216, 0.801);
    }

    .cursor {
      z-index: 11;
      pointer-events: none;
      position: fixed;
      left: -100px;
    }

    .tips {
      position: fixed;
      width: 100vw;
      height: 100vh;
      color: #eee;
      z-index: 100;
      pointer-events: none;
      display: flex;
      font-size: 32px;
      place-items: center;
      padding: 20px;
      place-content: center;
    }
  </style>
</head>

<body>


  <div class="tips">
    输入文字，按下ENTER发送，ESC，隐藏输入框
  </div>
  <div class="parent"></div>
  <div tabindex="1" type="text" class="d-input" contenteditable placeholder="输入文字,enter键发送"></div>
  <script>
    const socket = io("/");
    socket.on("connect", () => {
      socket.on(socket.id, (data) => {
        const { history, cursorList } = data
        history.forEach((item) => {
          addNewMessage(item.msg);
        });
        // cursorList.forEach(id => {
        //   addCursor(100, 100, id)
        // })
      })
    });
    socket.on("join", (cursorList) => {
      cursorList.forEach(id => {
        addCursor(100, 100, id)
      })
    })
    socket.io.on("error", (error) => {
      socket.close();
    });
    function addCursor(x, y, id) {
      const cursorImage = document.createElement("img")
      cursorImage.id = id
      cursorImage.src = "./my-cursor.png"
      cursorImage.width = 24
      cursorImage.className = "cursor"
      cursorImage.height = 24
      document.body.appendChild(cursorImage)
    }
    function moveCursor(x, y, id) {
      const el = document.getElementById(id)
      if (!el) return
      el.style.left = x + 'px'
      el.style.top = y + 'px'
      el.style.position = "fixed"

    }
    function addNewMessage(msg) {
      const div = document.createElement("div");
      const parent = document.querySelector(".parent")
      const { text, left, top } = msg;
      if (!text) return;
      div.innerHTML = text;
      div.classList.add("div-box")
      div.style.position = "absolute";
      div.style.left = left + "px";
      div.style.top = top + "px";
      parent.append(div);
    }
    socket.on("on-disconnect", (id) => {
      const el = document.getElementById(id)
      if (!el) return
      document.body.removeChild(el)
    })
    socket.on("broadcast_msg", (data) => {
      addNewMessage(data.msg);
    });


    socket.on("mouse-move", (data) => {
      const { left, top, id } = data
      moveCursor(left, top, id)
    })
    document.onmousemove = (e) => {
      // const cursor = document.querySelector(".cursor")
      // cursor.style.left = e.x + 'px'
      // cursor.style.top = e.y + 'px'
      socket.emit("mousemove", {
        left: e.x,
        top: e.y,
      })
    }
    /* 鼠标按下，显示输入框 */
    document.addEventListener("pointerdown", (e) => {
      let input = document.querySelector(".d-input");
      if (e.target.className === "d-input" || e.target.className === "button")
        return;
      input.style.left = e.x + "px";
      input.style.top = e.y + "px";
      input.style.opacity = "1";
      input.focus();
    });

    let input = document.querySelector(".d-input");
    input.addEventListener("keydown", (e) => {
      const { left, top } = input.getBoundingClientRect();
      if (e.keyCode === 13) {
        e.preventDefault()
        console.log(input.innerHTML.length / 1024);
        if (input.innerHTML.length / 1024 > 100) {
          window.alert("文本过大,不能大于100kb")
          return
        }
        socket.emit(
          "message",
          JSON.stringify({
            text: input.innerHTML,
            left,
            top,
          })
        );
        /* 发送后隐藏输入框 */
        input.style.opacity = "0";
        input.innerHTML = "";
      }
    });
    window.addEventListener("keydown", e => {
      if (e.keyCode === 27) {
        console.log(input);
        input.style.opacity = "0";
        input.style.left = "-100px"
      }
    })
  </script>
</body>

</html>